<template>
	<div class="casting-box text-white">
		<img style="width: 421px; height: 260px;" src="@/assets/images/mask-bg.png" />
		<el-button type="primary" class="btn-bg-blue btn-box" size="large">切换其他铸流</el-button>
		<div class="rest-box flex justify-center align-center text-sm">
			钢水重量：0t
		</div>

		<div class="list-box flex-between">
			<div>
				中包净重：0t
			</div>
			<div>
				手动测温：0℃
			</div>
			<div>
				连续测温：0℃
			</div>
		</div>

		<el-carousel :interval="5000" arrow="always" :autoplay="false" :loop="false" height="390px" @change="carouselChange" style="--el-carousel-arrow-hover-background: rgba(255, 255, 255, 0.1); --el-carousel-arrow-background: rgba(255, 255, 255, 0.05)">
			<el-carousel-item v-for="(item, index) in list" :key="index">
				<div class="mask-carousel-box" v-for="(zlItem, zlIndex) in item" :key="zlIndex" v-show="activeIndex == index">
					<div class="mask-item" :class="`mask-item-${item.length}-${zlIndex + 1}`">
						<maskCanvas :bseType="`${item.length}-${zlIndex + 1}`" :arcWidth="arcWidthFun(item)" :damageHeight="zlIndex === 0 ? 40 : ''"></maskCanvas>
						<div class="flex align-center mask-hqj">
							<el-icon size="20px">
								<CaretLeft />
							</el-icon>
							<span class="text-white" v-if="item.length < 3 || item.length - 1 === zlIndex">火切机</span>
						</div>
					</div>
				</div>
			</el-carousel-item>
		</el-carousel>

	</div>
</template>

<script setup>
	import maskCanvas from './maskCanvas.vue'
	import { ref } from 'vue';

	const zlData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
	const list = ref([]) //铸流数据
	const chunk_size = 7 //二维数组每个数组的长度
	//把铸流数据转成二维数组
	for (let i = 0; i < zlData.length; i += chunk_size) {
		list.value.push(zlData.slice(i, i + chunk_size));
	}

	//获取每条铸流图的宽度
	const arcWidthFun = (item) => {
		let arcWidth = 0
		switch (item.length) {
			case 1:
				arcWidth = 70
				break;
			case 2:
				arcWidth = 65
				break;
			case 3:
				arcWidth = 60
				break;
			case 4:
				arcWidth = 50
				break;
			case 5:
				arcWidth = 35
				break;
			case 6:
				arcWidth = 25
				break;
			case 7:
				arcWidth = 15
				break;
			default:
				arcWidth = 70
				break;
		}
		return arcWidth
	}

	const activeIndex = ref(0) //当前激活的tab
	const carouselChange = (index) => {
		setTimeout(() => {
			activeIndex.value = index
		}, 200)
	}
</script>

<style lang="scss" scoped>
	.casting-box {
		position: relative;
		padding: 20px;

		.btn-box {
			position: absolute;
			left: 20px;
			top: 60px;
		}

		.rest-box {
			width: 130px;
			height: 120px;
			position: absolute;
			left: 190px;
			top: 60px;
		}

		.list-box {
			width: 315px;
			height: 50px;
			position: absolute;
			left: 70px;
			top: 225px;
			font-size: 14px;
		}
	}

	.mask-carousel-box {
		position: relative;

		.mask-item {
			position: absolute;
			top: 0;

			.mask-hqj {
				position: absolute;
				bottom: 50px;
			}

			&::after {
				position: absolute;
				content: '';
				background-image: url('@/assets/images/mask-item-bg.png');
				background-size: 100% 100%;
				z-index: -1;
			}

			&::before {
				position: absolute;
				content: '';
				background-color: #f63819;
				z-index: 2;
			}

			&.mask-item-1-1 {
				left: 150px;

				&::after {
					left: 8px;
					top: -3px;
					width: 100px;
					height: 30px;
				}

				&::before {
					left: 20px;
					top: 5px;
					width: 80px;
					height: 18px;
				}

				.mask-hqj {
					left: 300px;
				}
			}

			&.mask-item-2-1 {
				left: 60px;

				&::after {
					left: 10px;
					top: -3px;
					width: 95px;
					height: 30px;
				}

				&::before {
					left: 20px;
					top: 5px;
					width: 80px;
					height: 18px;
				}

				.mask-hqj {
					left: 230px;
				}
			}

			&.mask-item-2-2 {
				left: 240px;

				&::after {
					left: 10px;
					top: -3px;
					width: 95px;
					height: 30px;
				}

				&::before {
					left: 20px;
					top: 5px;
					width: 80px;
					height: 18px;
				}

				.mask-hqj {
					left: 300px;
				}
			}

			&.mask-item-3-1 {
				left: 40px;

				&::after {
					left: 17px;
					top: -3px;
					width: 80px;
					height: 30px;
				}

				&::before {
					left: 28px;
					top: 5px;
					width: 65px;
					height: 18px;
				}

				.mask-hqj {
					left: 210px;
				}
			}

			&.mask-item-3-2 {
				left: 150px;

				&::after {
					left: 17px;
					top: -3px;
					width: 80px;
					height: 30px;
				}

				&::before {
					left: 28px;
					top: 5px;
					width: 65px;
					height: 18px;
				}

				.mask-hqj {
					left: 230px;
				}
			}

			&.mask-item-3-3 {
				left: 260px;

				&::after {
					left: 17px;
					top: -3px;
					width: 80px;
					height: 30px;
				}

				&::before {
					left: 28px;
					top: 5px;
					width: 65px;
					height: 18px;
				}

				.mask-hqj {
					left: 300px;
				}
			}

			&.mask-item-4-1 {
				left: 60px;

				&::after {
					left: -8px;
					top: -3px;
					width: 70px;
					height: 30px;
				}

				&::before {
					left: 0px;
					top: 5px;
					width: 58px;
					height: 18px;
				}

				.mask-hqj {
					left: 95px;
				}
			}

			&.mask-item-4-2 {
				left: 145px;

				&::after {
					left: -8px;
					top: -3px;
					width: 70px;
					height: 30px;
				}

				&::before {
					left: 0px;
					top: 5px;
					width: 58px;
					height: 18px;
				}

				.mask-hqj {
					left: 95px;
				}
			}

			&.mask-item-4-3 {
				left: 225px;

				&::after {
					left: -8px;
					top: -3px;
					width: 70px;
					height: 30px;
				}

				&::before {
					left: 0px;
					top: 5px;
					width: 58px;
					height: 18px;
				}

				.mask-hqj {
					left: 95px;
				}
			}

			&.mask-item-4-4 {
				left: 305px;

				&::after {
					left: -8px;
					top: -3px;
					width: 70px;
					height: 30px;
				}

				&::before {
					left: 0px;
					top: 5px;
					width: 58px;
					height: 18px;
				}

				.mask-hqj {
					left: 95px;
				}
			}

			&.mask-item-5-1 {
				left: 50px;

				&::after {
					left: 3px;
					top: -3px;
					width: 50px;
					height: 25px;
				}

				&::before {
					left: 8px;
					top: 5px;
					width: 40px;
					height: 14px;
				}

				.mask-hqj {
					left: 85px;
				}
			}

			&.mask-item-5-2 {
				left: 115px;

				&::after {
					left: 3px;
					top: -3px;
					width: 50px;
					height: 25px;
				}

				&::before {
					left: 8px;
					top: 5px;
					width: 40px;
					height: 14px;
				}

				.mask-hqj {
					left: 85px;
				}
			}

			&.mask-item-5-3 {
				left: 180px;

				&::after {
					left: 3px;
					top: -3px;
					width: 50px;
					height: 25px;
				}

				&::before {
					left: 8px;
					top: 5px;
					width: 40px;
					height: 14px;
				}

				.mask-hqj {
					left: 85px;
				}
			}

			&.mask-item-5-4 {
				left: 245px;

				&::after {
					left: 3px;
					top: -3px;
					width: 50px;
					height: 25px;
				}

				&::before {
					left: 8px;
					top: 5px;
					width: 40px;
					height: 14px;
				}

				.mask-hqj {
					left: 85px;
				}
			}

			&.mask-item-5-5 {
				left: 310px;

				&::after {
					left: 3px;
					top: -3px;
					width: 50px;
					height: 25px;
				}

				&::before {
					left: 8px;
					top: 5px;
					width: 40px;
					height: 14px;
				}

				.mask-hqj {
					left: 85px;
				}
			}

			&.mask-item-6-1 {
				left: 45px;
				top: -10px;

				&::after {
					left: 8px;
					top: 8px;
					width: 40px;
					height: 20px;
				}

				&::before {
					left: 11px;
					top: 12px;
					width: 34px;
					height: 13px;
				}

				.mask-hqj {
					left: 83px;
				}
			}

			&.mask-item-6-2 {
				left: 100px;
				top: -10px;

				&::after {
					left: 8px;
					top: 8px;
					width: 40px;
					height: 20px;
				}

				&::before {
					left: 11px;
					top: 12px;
					width: 34px;
					height: 13px;
				}

				.mask-hqj {
					left: 83px;
				}
			}

			&.mask-item-6-3 {
				left: 155px;
				top: -10px;

				&::after {
					left: 8px;
					top: 8px;
					width: 40px;
					height: 20px;
				}

				&::before {
					left: 11px;
					top: 12px;
					width: 34px;
					height: 13px;
				}

				.mask-hqj {
					left: 83px;
				}
			}

			&.mask-item-6-4 {
				left: 210px;
				top: -10px;

				&::after {
					left: 8px;
					top: 8px;
					width: 40px;
					height: 20px;
				}

				&::before {
					left: 11px;
					top: 12px;
					width: 34px;
					height: 13px;
				}

				.mask-hqj {
					left: 83px;
				}
			}

			&.mask-item-6-5 {
				left: 265px;
				top: -10px;

				&::after {
					left: 8px;
					top: 8px;
					width: 40px;
					height: 20px;
				}

				&::before {
					left: 11px;
					top: 12px;
					width: 34px;
					height: 13px;
				}

				.mask-hqj {
					left: 83px;
				}
			}

			&.mask-item-6-6 {
				left: 320px;
				top: -10px;

				&::after {
					left: 8px;
					top: 8px;
					width: 40px;
					height: 20px;
				}

				&::before {
					left: 11px;
					top: 12px;
					width: 34px;
					height: 13px;
				}

				.mask-hqj {
					left: 83px;
				}
			}

			&.mask-item-7-1 {
				left: 40px;
				top: -10px;

				&::after {
					left: 16px;
					top: 8px;
					width: 25px;
					height: 20px;
				}

				&::before {
					left: 20px;
					top: 12px;
					width: 20px;
					height: 14px;
				}

				.mask-hqj {
					left: 77px;
				}
			}

			&.mask-item-7-2 {
				left: 87px;
				top: -10px;

				&::after {
					left: 16px;
					top: 8px;
					width: 25px;
					height: 20px;
				}

				&::before {
					left: 20px;
					top: 12px;
					width: 20px;
					height: 14px;
				}

				.mask-hqj {
					left: 77px;
				}
			}

			&.mask-item-7-3 {
				left: 134px;
				top: -10px;

				&::after {
					left: 16px;
					top: 8px;
					width: 25px;
					height: 20px;
				}

				&::before {
					left: 20px;
					top: 12px;
					width: 20px;
					height: 14px;
				}

				.mask-hqj {
					left: 77px;
				}
			}

			&.mask-item-7-4 {
				left: 181px;
				top: -10px;

				&::after {
					left: 16px;
					top: 8px;
					width: 25px;
					height: 20px;
				}

				&::before {
					left: 20px;
					top: 12px;
					width: 20px;
					height: 14px;
				}

				.mask-hqj {
					left: 77px;
				}
			}

			&.mask-item-7-5 {
				left: 228px;
				top: -10px;

				&::after {
					left: 16px;
					top: 8px;
					width: 25px;
					height: 20px;
				}

				&::before {
					left: 20px;
					top: 12px;
					width: 20px;
					height: 14px;
				}

				.mask-hqj {
					left: 77px;
				}
			}

			&.mask-item-7-6 {
				left: 275px;
				top: -10px;

				&::after {
					left: 16px;
					top: 8px;
					width: 25px;
					height: 20px;
				}

				&::before {
					left: 20px;
					top: 12px;
					width: 20px;
					height: 14px;
				}

				.mask-hqj {
					left: 77px;
				}
			}

			&.mask-item-7-7 {
				left: 322px;
				top: -10px;

				&::after {
					left: 16px;
					top: 8px;
					width: 25px;
					height: 20px;
				}

				&::before {
					left: 20px;
					top: 12px;
					width: 20px;
					height: 14px;
				}

				.mask-hqj {
					left: 77px;
				}
			}
		}
	}
</style>